<style lang="less">
  @import './login.less';
</style>

<template>
  <div class="login">
    <div class="registered-con">
      <Card :bordered="false">
        <p slot="title">
          <Icon type="log-in"></Icon>
          注册用户
        </p>
        <div class="form-con">
          <Form>
            <FormItem label="手机号">
              <Input v-model="telephone" placeholder="手机号"></Input>
            </FormItem>
            <FormItem label="验证码">
              <Input class="code-input" v-model="code" placeholder="验证码">
              <div class="code-btn" slot="append" @click="getCode()">{{ma_message}}</div>
              </Input>
            </FormItem>
            <FormItem label="姓名">
              <Input v-model="username" placeholder="姓名"></Input>
            </FormItem>
            <FormItem label="性别">
              <Select v-model="sex" :transfer="true" style="width:100%;">
                <Option v-for="item in sexArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem label="密码">
              <Input type="password" v-model="password" placeholder="密码"></Input>
            </FormItem>
            <FormItem label="确认密码">
              <Input type="password" v-model="password2" placeholder="确认密码"></Input>
            </FormItem>
            <FormItem>
              <Button @click="registeredFun" type="primary" long>注册</Button>
            </FormItem>
            <div class="botton">
              <span class="right" @click="tologin">已有账号？去登录</span>
            </div>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  export default {
    name: 'registered',
    data () {
      return {
        sexArr: [
          {
            name: '男',
            id: 'male'
          },
          {
            name: '女',
            id: 'female'
          }
        ],
        telephone: '',
        code: '',
        username: '',
        sex: '',
        password: '',
        password2: '',
        ma_message: "获取验证码",
        num: 60,
        registered_result: false,
      };
    },
    created: function () {
      var _this = this;
    },
    methods: {
      tologin: function () {
        var _this = this;
        _this.$router.push({
          name: 'login'
        });
      },
      // 发验证码
      getCode: function () {
        var _this = this;
        var codebtnval = _this.ma_message;

        if (!(codebtnval == '获取验证码' || codebtnval == '重新发送')) {
          return false;
        }
        if (_this.telephone == null || _this.telephone == "") {
          _this.$Message.error('手机号不能为空!');
          return false;
        }
        if (!Utils.checkMobile(_this.telephone)) {
          _this.$Message.error('手机号格式不正确!');
          return false;
        }
        if (codebtnval == '获取验证码' || codebtnval == '重新发送') {
          var data = {
            mobile: _this.telephone,
          };
          var params = {
            url: '/user/captcha',
            type: Util.method.get,
            data: data,
            success: _successFun
          };
          Util.ajax(_this, params);
          function _successFun(res) {
            if (res.result == 0) {
              //已发送，正在倒计时
              _this.codeBtn_num();
            } else {
              _this.$Message.error('验证码发送失败!');
            }
          }
        }
      },
      codeBtn_num: function () {
        var _this = this;
        var num = _this.num;
        var str = '' + num + 's';
        _this.ma_message = str;
        setTimeout(_this.setTimeOut, 1000);
      },
      setTimeOut: function () {
        var _this = this;
        var num = _this.num - 1;
        _this.num = num;
        if (num <= 0) {
          var str = '重新发送';
          _this.num = 60;
          _this.ma_message = str
        } else {
          var str = '' + num + 's';
          _this.ma_message = str;
          setTimeout(_this.setTimeOut, 1000);
        }
      },
      // 注册
      registeredFun: function () {
        var _this = this;
        var telephone = _this.telephone;
        var code = _this.code;
        var username = _this.username;
        var sex = _this.sex;
        var password = _this.password;
        var password2 = _this.password2;
        if (_this.telephone == null || _this.telephone == "") {
          _this.$Message.error('手机号不能为空!');
          return false;
        }
        if (!Utils.checkMobile(_this.telephone)) {
          _this.$Message.error('手机号格式不正确!');
          return false;
        }
        if (code == '') {
          _this.$Message.error('验证码不能为空!');
          return false;
        }
        if (username == '') {
          _this.$Message.error('姓名不能为空!');
          return false;
        }
        if (sex == '') {
          _this.$Message.error('请选择性别!');
          return false;
        }
        if (password == '') {
          _this.$Message.error('密码不能为空!');
          return false;
        }
        if (password2 == '') {
          _this.$Message.error('请确认密码!');
          return false;
        }
        if (password != password2) {
          _this.$Message.error('两次输入的密码不一致!');
          return false;
        }
        var data = {
          type: 'register',
          mobile: telephone,
          captcha: code,
          name: username,
          password: password,
          sex: sex
        };
        var params = {
          url: '/user/add',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            _this.telephone = '';
            _this.code = '';
            _this.username = '';
            _this.sex = '';
            _this.password = '';
            _this.password2 = '';
            _this.ma_message = '获取验证码';
            _this.registered_result = true;
            _this.$Message.success('注册成功，请登录!');
            setTimeout(_this.tologin, 1000);
          } else {
            _this.$Message.error('注册失败!');
          }
        }
      },
    }
  };
</script>
